<template>
	
	<view class="content" style="background-color:aliceblue;">
	<scroll-view @scrolltolower="scroll" style="height: 100vh;" class="martop" scroll-y >
		<view class="borde-padd-24 flex-wrap Hotrecruitmentunits">
			<view class="Hotrecruitmentunits-list" @click="goPages('/record/CompanyRecruitment/index?company_id='+item.id+'&company_count='+item.company_count)"  v-for="(item,index) in companyRecommend">
				<view style="display: flex;">
					<image class="img" @load="imageLoad($event,index)"
					 :style="{
					 	height:imgHeight[index]+'rpx'
					 }"
					 style="width:124rpx;" :index="index" :src="item.company_show_logo" mode="aspectFit" ></image>
					<view class="" style="padding-left: 20rpx;">
						<view class="tabClsiy ellipsis-multiline" >
							{{item.company_name}}
						</view>
						<view class="tit-s">
						{{item.company_count}}个在招职位</view>
					</view>
				</view>
				
				<view class="address">
					<image class="conemEmsneh" style="width: 30rpx;height: 30rpx;" src="../../static/dingweiMen.png"></image>	{{item.address}}
				</view>
				
			</view>
		</view>
	</scroll-view>
		
		<footerTer></footerTer>
	</view>
	
</template>
	<script>
		import footerTer from "../../components/footer_n.vue"
		import {
			Request
		} from '@/utils/request.js'
		
	export default {
		components:{
			footerTer,
		},
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
				banner:[],
				Recommend:[],
				consultList:[],
				jobConList:[],
				unifiendLists:[],
				companyRecommend:[],
				page:1,
				indicatorDots:false,
				scrollTop:0,
				recommendFun:[],
				imgHeight:[],
			
	        }
	    },
		onLoad() {
			// this.tabindexFun();
			// this.specialList();
			//this.joblist();
			//this.questionsList();
			// this.getUnifiendLists();
			this.getCompanyRecommend();
		},
		onPageScroll(e) {
			//this.page=this.page+1;
		},
		onShow: function() {
		  uni.onPageScroll(this.handlePageScroll);
		},
	    methods: {
			imageLoad(e,index){
					console.log(e,index)
				    const originalWidth = e.detail.width;
				    const originalHeight = e.detail.height;
				    const containerWidth = wx.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				    const ratio = originalWidth / originalHeight;
				    const imgHeight = containerWidth / ratio;
				    // this.imgHeight = imgHeight;
					this.imgHeight[index]=imgHeight<100?imgHeight:120;
					this.imgHeight=[...this.imgHeight]
			},
			// job/getCompanyRecommend
			scroll(e){
				this.page=this.page+1;
				this.getCompanyRecommend()
			},
			
			getCompanyRecommend(){
				Request('job/getCompanyRecommend',{
					page:this.page,
				}).then(({data}) => {
					const tdata = data || [];
					this.companyRecommend=this.companyRecommend.concat(tdata);
					// this.jobConList = this.jobConList.concat(tdata);
				})
			},
			getUnifiendLists(){
				Request('getUnifiendLists',{
					limit:6
				}).then(({list}) => {
					const tdata = list || [];
					this.unifiendLists=this.unifiendLists.concat(tdata);
					// this.jobConList = this.jobConList.concat(tdata);
				})
			},
			joblist(){
				Request('job/list').then(({data}) => {
					const tdata = data || [];
					this.jobConList = this.jobConList.concat(tdata);
				})
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			tabindexFun(){
				Request('index').then(({banner,Recommend}) => {
					this.banner=banner;
					this.Recommend=Recommend
				})
			},
			///api/special/list
			questionsList(){
				Request('questions/list').then(({banner,list}) => {
					this.recommendFun=list;
				})
			},
			
			specialList(){
				Request('special/list').then(({list}) => {
					const tdata = list || [];
					this.consultList = this.consultList.concat(tdata);
				})
			},
	    }
	}
	</script>


<style scoped>
	.scroll-view_H {
			/* white-space: nowrap; */
			width: 100%;
			padding-top: 24rpx;
			padding-bottom: 40rpx;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 340rpx;
			height: 454rpx;
			margin-bottom: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
		.scroll-viewconter{
			position: relative;
		}
		.jianjie{
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #e4edfa;
			line-height: 55rpx;
			color: #6486dd;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;
			border-radius: 25rpx;
		}
		.address{
			color: #000000;
			font-size: 28rpx;
			padding-top: 16rpx;
			position: relative;

			padding-left: 32rpx;
		}
		.address .conemEmsneh{
			position: absolute;
			left: 0px;
			top: 24rpx;
		}
		.tabClsiy{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 33rpx;
			color: #0D0E0F;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.scroll-viewconter .tis{
			position: relative;
			height: 44rpx;
			padding: 0 24rpx;
			background: rgba(255, 255, 255, .2);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			position: absolute;
			left: 24rpx;
			bottom: 24rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		
		.scroll-view_H .user-name{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			padding-bottom: 10rpx;
			color: #0D0E0F;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.scroll-view_H .user-definf{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			 white-space: pre-wrap;
			color: #8F9294;
		}
		.consList{
			width: 56rpx;
			height: 32rpx;
			background: #FAF2E7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #E8A03D;
			text-align: center;
			line-height: 32rpx;
			font-style: normal;
			text-transform: none;
			margin-left: 10rpx;
		}
	.Hotrecruitmentunits{
		padding-top: 24rpx;
		padding-bottom: 40rpx;
	}
	.Hotrecruitmentunits-list{
		width: 100%;
		/* height: 258rpx; */
		margin-bottom: 20rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.Hotrecruitmentunits-list:nth-child(3n){
		margin-right: 0;
	}
	
	.Hotrecruitmentunits-list .tit-s{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		padding-top: 20rpx;
		color: #000000;
		/* text-align: center; */
		font-style: normal;
		text-transform: none;
	}
	.headertop{
		width: 750rpx;
		box-sizing: border-box;
		padding-top: 140rpx;
		background: linear-gradient( 180deg, #D3DCFD 0%, #FAF7F7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.conListConterr{
		width: 100%;
		top: 0;
		overflow: hidden;
		left: 0;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		padding-top: 70rpx !important;
		/* background: #D3DCFD; */
		z-index: 999;
	}
	.search{
		width: 100%;
		height: 68rpx;
		background: rgba(255,255,255,0.7);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		border: 1rpx solid #FFFFFF;
		display: flex;
		align-items: center;
	}
	.diangwei{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.diangwei .imgaes{
		width: 20rpx;
		height: 20rpx;
	}
	.flex-line-height .zie{
		margin-right: 5rpx;
	}
	.search .search-img{
		width: 28rpx;
		height: 28rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	.bannerswiper-item{
		height: 260rpx;
		margin-top: 26rpx;
		border-radius: 16rpx;
	}
	.bannerswiper-item .swiper-item{
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.nav-conter{
		margin-top: 62rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.nav-list{
		display: flex;
		flex-wrap:wrap;
		text-align: center;
		justify-content: center;
		width: 20%;
		margin-bottom: 16rpx;
		/* margin-right: 55rpx; */
	}
	.nav-list:nth-child(5n){
		margin-right: 0rpx;
	}
	.nav-contervonLIst{
		width: 342rpx;
		height: 126rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		/* padding: 24rpx; */
		overflow: hidden;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
		
	.nav-contervonLIst .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
	.nav-contervonLIst .sub-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		
	.nav-contervonLIst .nav-ciosn{
		width: 100%;
		height: 100%;
	}
	.nav-list .tit{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #646669;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.title-conter .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.title-conter .sub-title-right{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #8F9294;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.title-conter .ci{
		margin-right: 8rpx;
	}
	.course-conter{
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		justify-content: space-between;
	}
	.course-conter .course-list{
		width: 342rpx;
		height: 370rpx;
		margin-bottom: 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.course-conter .course-list .icOn{
		width: 100%;
		height: 192rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.course-conter .course-list .conterArr{
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-top: 8rpx;
	}
		.course-conter .course-list  .title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0D0E0F;
			text-align: left;
			font-style: normal;
			text-transform: none;
	}
	.questionbank-conter{
		margin-bottom: 40rpx;
	}
.course-conter .course-list	.conte  .lis{
	height: 40rpx;
	background: #F2F4F7;
	box-sizing: border-box;
	padding: 5rpx 12rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 22rpx;
	color: #8F9294;
	text-align: left;
	font-style: normal;
	margin-right: 8rpx;
	text-transform: none;
}
.course-conter .course-list	 .money{
	font-family: MiSans, MiSans;
	font-weight: 600;
	margin-top: 16rpx;
	font-size: 32rpx;
	color: #E26262;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.course-conter .course-list	 .fuho{
	font-size: 24rpx;
	padding-top: 9rpx;
	margin-right: 5rpx;
}
.questionbank{
	margin-top: 32rpx;
}
.questionbank-left{
	width: 148rpx;
	height: 148rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	overflow: hidden;
	position: relative;
	margin-right: 16rpx;
}
.questionbank-left .icon{
	width: 100%;
	height: 100%;
}
.questionbank-left .tis{
	width: 60rpx;
	height: 32rpx;
	background: #419CF7;
	text-align: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #FFFFFF;
	position: absolute;
	left: 16rpx;
	top: 16rpx;
	font-style: normal;
	z-index: 9;
	text-transform: none;
	line-height: 32rpx;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
	border: 1rpx solid #FFFFFF;
}
.questionbank-right{
	width: 520rpx;
}
.questionbank-right .title{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #0D0E0F;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.questionbank-right .sub-title{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #8F9294;
	text-align: left;
	font-style: normal;
	margin-bottom: 15rpx;
	text-transform: none;
}
.questionbank-right .money{
	font-family: MiSans, MiSans;
	font-weight: 600;
	margin-top: 16rpx;
	font-size: 32rpx;
	color: #E26262;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.questionbank-right .money  .fuho{
	font-size: 24rpx;
	padding-top: 9rpx;
	margin-right: 5rpx;
}
.questionbank-right .btn{
	width: 136rpx;
	height: 56rpx;
	background: #E5E8F7;
	text-align: center;
	line-height: 56rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #3B5EEC;
	font-style: normal;
	text-transform: none;
}
.position{
	margin-top: 24rpx;
}
.position-list{
	padding: 24rpx;
	width: 702rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin-bottom: 16rpx;
}
.list-header .l{
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #0D0E0F;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.list-header .r{
	font-family: MiSans, MiSans;
	font-weight: 600;
	font-size: 28rpx;
	color: #3B5EEC;
	text-align: right;
	font-style: normal;
	text-transform: none;
}
.position-list .stne{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #8F9294;
	text-align: left;
	margin-bottom: 16rpx;
	margin-top: 10rpx;
	font-style: normal;
	text-transform: none;
}
.position-list .cten{
	/* font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #8F9294;
	text-align: right;
	font-style: normal;
	text-transform: none; */
	width: 144rpx;
	height: 56rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 56rpx;
	font-style: normal;
	text-transform: none;
	background: #3B5EEC;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.label-list{
	height: 48rpx;
	padding: 0 16rpx;
	background: #F7F8FA;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #8F9294;
	margin-right: 16rpx;
	margin-bottom: 24rpx;
	text-align: center;
	line-height: 48rpx;
	font-style: normal;
	text-transform: none;
}
.contenArrsbx{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #646669;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.contenArrsbx .user-img{
	width: 48rpx;
	height: 48rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	margin-right: 8rpx;
}
</style>
